<template>
  <view class="product-item-card" :style="{ '--tag-color': tagColor,'--price-color':priceColor }">
    <view class="image-container">
      <image class="product-image" :src="product.image" mode="aspectFill"></image>
      <!--      <view class="protein-badge">
              <text class="percentage">95%</text>
              <text class="desc">小麦蛋白</text>
            </view>-->
    </view>

    <view class="product-info">
      <view class="title-row">
        <view v-if="showTag" class="hot-tag">HOT</view>
        <text class="product-name text-ellipsis">{{ product.name }}</text>
      </view>

      <view class="price-row">
        <view class="original-price">¥{{ product.originalPrice }}</view>
        <view class="member-price-wrap">
          <view class="member-label">会员价</view>
          <text class="member-price">¥{{ product.memberPrice }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'product-item',
  props: {
    product: {
      type: Object,
      default: () => ({
        image: '',
        name: '炎黄福德全麦面',
        originalPrice: '99.00',
        memberPrice: '89.90'
      })
    },
    priceColor: {
      type: String,
      default: '#e54d42'
    },
    tagColor: {
      type: String,
      default: '#e54d42'
    },
    showTag: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.product-item-card {
  background: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;

  .image-container {
    position: relative;
    width: 100%;
    height: 360rpx;

    .product-image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }

    .protein-badge {
      position: absolute;
      left: 20rpx;
      bottom: 20rpx;
      width: 100rpx;
      height: 100rpx;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .percentage {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }

      .desc {
        font-size: 20rpx;
        color: #666;
      }
    }
  }

  .product-info {
    margin-top: 16rpx;

    .title-row {
      display: flex;
      align-items: center;

      .hot-tag {
        background: var(--tag-color);
        color: #ffffff;
        font-size: 24rpx;
        padding: 4rpx 16rpx;
        border-radius: 8rpx;
        margin-right: 12rpx;
        flex-shrink: 0;
      }

      .product-name {
        font-size: 28rpx;
        color: #333;
        flex: 1;
      }

      .text-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .price-row {
      margin-top: 4rpx;

      .original-price {
        font-size: 26rpx;
        color: #999;
        text-decoration: line-through;
      }

      .member-price-wrap {
        display: flex;
        align-items: center;
        height: 44rpx;
        line-height: 44rpx;
        margin-top: 20rpx;
        border: 1px solid var(--price-color);
        border-radius: 8rpx;
        width: 86%;

        .member-label {
          height: 100%;
          padding: 0 16rpx;
          background: var(--price-color);
          color: #ffffff;
          font-size: 24rpx;
          line-height: 40rpx;
          border-radius: 8rpx 0 0 8rpx;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            right: -8rpx;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 8rpx 0 8rpx 8rpx;
            border-color: transparent transparent transparent var(--price-color);
          }
        }

        .member-price {
          margin-left: 16rpx;
          color: var(--price-color);
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
